<template>
  <div>
        <div class="content" v-for="(v,i) in arr" :key="i">
            <p class="first">{{v.text}}</p><span>></span>
        </div>
        <p class="change">换一换</p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {text:"新人专享大礼包中的饮品抵用金如何使用"},
                {text:"新人专享大礼包中的饮品抵用金可购买什么商品"},
                {text:"如何与瑞幸开展广告、活动、媒体的合作？"},
                {text:"什么是进场合作？"},
                {text:"什么是luckin合作伙伴?"},
            ]
        }
    }
}
</script>

<style scoped>
.content{
    width: 3.36rem;
    height: 0.4rem;
    line-height: 0.4rem;
    display: flex;
    font-size: 0.12rem;
    color: #686868;margin: auto;
    border-bottom: 1px solid  #dfdbdb;
    position: relative;
}
.router-link-active {
    font-weight: normal;
    /* background-color: aqua; */
    /* border:none; */
}
.content span{
    color:#a3a1a1;
    position: absolute;
    right: 0;
}
.change{
    font-size: 0.12rem;
    width: 3.36rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    color: #7f90c4;
    font-weight: 600;
}
</style>